<template>
	<div class="login">
		<div class="login-m">
			<h2>盛大汽车礼品卡发放平台</h2>
      <div class="login-content">
        <input class="login-content-input" v-focus v-model="ruleForm.username" placeholder="请输入11位手机号" pattern="[0-9]*" onkeyup="this.value=this.value.replace(/\D/gi,&quot;&quot;)"/>
        <van-button @click="submitForm()" class="submit-bt" type="default">获取验证码</van-button>
  		  <p class="login-tips">登录遇到问题，请联系客服020-81293919‬</p>
		  </div>
	  </div>
	</div>
</template>
<script>
	import {login, getUserByAccount} from '../../api/login.js'
	export default {
		data () {
			return{
				checked:true,
        ruleForm: {
          username: ''
				},
        rules: {
          username: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ]
        }
      };
		},
		created(){

		},
		//页面加载调用获取cookie值
		mounted(){
		},
    methods: {
      submitForm () {
        const phone = {phone: this.ruleForm.username}
        getUserByAccount(phone).then(res => {
          if (res.status === 200) {
            this.$router.push({name: 'login'});
            sessionStorage.setItem('phone', this.ruleForm.username);
            sessionStorage.setItem('token', '');
          }
        }).catch(error => {
          if (error.message.indexOf('权限不足') > -1) {

          } else {
            this.$toast.fail(error.message);
          }
        })
      }
    }
	}
</script>
<style lang="less" scoped>
	h2{
    height:180px;line-height:180px;
    color:#fff;
    text-align:center;
    font-size: 26px;
    background-image: url(../../assets/img/login-bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .login-content{
    padding: 36px

  }
  .login{
    transform: none;
  }
  .login-content-input{
    width: 100%;
    padding: 9px 0px;
    border: 0;
    margin: 0;
    padding: 0;
    resize: none;
    font-size: 18px;
    text-align: left;
    color:rgba(51,51,51,1);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: transparent;
    min-height: 40px;
    border-bottom: 1px solid rgba(237,237,237,1);;
    margin-bottom: 100px;
    margin-top: 52px;
    border-radius: 0px;
  }
  input::-webkit-input-placeholder {
    color:rgba(204,204,204,1);
    font-size: 18px;
    color: #333;
  }
  .login-tips{
    color: #EDA23D;
    text-align: center;
    // position: absolute;
    // overflow: auto;
    // bottom: 40px;
    margin-top: 90px;
    width: 100%;
  }
  .submit-bt{
    width:100%;
    font-size: 18px;
  }
	input {
		border: none;
		display:block;
		width:90%;
		margin:5% auto;
		height:35px;
		line-height:35px;

	}
	button {
		background:#FF8A41;	display:block;
		width:90%;margin:5% auto;
		height:50px;line-height:50px;text-align:center;border: none;border-radius:30px;color:#fff;
	}
	p {
		color:#EDA23D;text-align:center;position: relative;
	}

</style>
